<template>
  <div class="content">
    <!-- 头部tab标签页 -->
 <el-carousel arrow="always" :autoplay="false" :loop="false" :initial-index="navIndex" height="80px" indicator-position="none">
    <el-carousel-item v-for="(item , index) in courseSubjectList" :key="index"
    >
      <div class="nav" v-for="(nav , index) in item" :key="index" @click="handleClick(nav,index)" :class="[activeName == nav.subid? 'active' : '']">
        <div class="tit">{{nav.title}}&nbsp;{{nav.name}}</div>
      </div>
    </el-carousel-item>
  </el-carousel>
  <div class="zhangjie" ref="dom">
        <div class="left">
          <div class="button" @click="getCourseChapter()">全部</div>
        </div>
        <div class="right" ref="chapterList">
          <div v-for="(item , index) in zhangjieList" :key="index" @click="getCourseChapter(item.value)" :class="[chapterNative == item.value? 'chapterNative' : '']">{{item.name}}</div>
          <i v-if="zhangjieList.length > 20" class="iconfont icon-jiantou_datika" @click="more"></i>
        </div>
      </div>
    <!-- 课程列表 -->
    <ul class="yulan">
      <li v-for="(item , index) in courseChapterList" :key="index">
        <div class="bgc"  :style="{ backgroundImage: 'url(' + item.thumbnail + ')' }" @click="goDetail(item)">
          <div v-if="item.isNew" class="new">new</div>
          <div class="time"><span>{{item. videoDurationStr}}</span></div>
          <div class="liulanliang">
            <i class="yanjing iconfont icon-chakan_yanjing" />
            <span>{{item.views}}</span>
          </div>
          <p>{{item.resourceName}}</p>
        </div>
        <p class="km">{{item.subName}}</p>
        <p class="zj">{{item.chapterName}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "course",
  components: {
  },
  data(){
    return{
      courseSubjectList:[],//科目列表
      zhangjieList:[],//章节列表
      courseChapterList:[],//课程列表
      activeName: 0,
      navIndex: 0,
      maxHeight: true,
      chapterNative: 0
    }
  },
  created(){
    this.getCourseSubject()
  },
  methods:{
    //获取课堂科目列表
   getCourseSubject(){
       this.axios.get(`/web/student/class/getCourseSubject`,{}).then(res => {
        //  this.courseSubjectList = res
        //数组截取
            let a_len = res.length
            this.courseSubjectList = []
            for(var i=0;i<a_len;i+=5){
              this.courseSubjectList.push(res.slice(i,i+5));
            }
            //给子元素添加属性，记录轮播的索引位置
            for(let i = 0 ; i < this.courseSubjectList.length ; i++){
              for(let j = 0 ; j < this.courseSubjectList[i].length ; j++){
                this.courseSubjectList[i][j].fatherIndex = i
              }
            }
            this.activeName = this.courseSubjectList[0][0].subid
            this.getZhangjieList()
       })
    },
    //获取章节列表
    getZhangjieList(){
      //判断是否是面包屑导航返回的
      if(this.$route.query.id){
        this.activeName = this.$route.query.id
        this.navIndex = Number(this.$route.query.index)
        //清空路由参数
        this.$router.push({ query: {} });
        for(let  i = 0 ;  i<this.courseSubjectList.length ;i++ ){
          if( this.activeName == this.courseSubjectList[i][0].subid){
            this.$nextTick().then(() => {
              this.$refs.dom.style.borderRadius = "0px 14px 14px 14px"
            })
          }else if(this.courseSubjectList[i][4] && this.activeName == this.courseSubjectList[i][4].subid){
             this.$nextTick().then(() => {
                this.$refs.dom.style.borderRadius = "14px 0px 14px 14px"
             })
          }else {
             this.$refs.dom.style.borderRadius = "14px 14px 14px 14px"
          }
        }
      }
      this.axios.get(`/web/student/class/getSubChapters`,{ params:{
         subId:this.activeName
      }}).then(res => {
        this.zhangjieList = res
        this.getCourseChapter()
      })
    },
    //获取课程信息
      getCourseChapter(val){
        this.chapterNative = val
        if(val){
           var chapterId = val
        }
        this.axios.get(`/web/student/class/getCourseChapter`,{ params:{
         subId: this.activeName,
         chapterId: chapterId
      }}).then( res =>{
        this.courseChapterList = res
      })
      },
    //tab切换
    handleClick(tab,index) {
      this.activeName = tab.subid
      this.navIndex = tab.fatherIndex
        this.axios.get(`/web/student/class/getSubChapters`,{ params:{
         subId: this.activeName
      }}).then(res => {
        this.zhangjieList = res
        this.getCourseChapter()
      })
      if(index == 4){
        this.$refs.dom.style.borderRadius = "14px 0px 14px 14px"
      } else if(index == 0) {
        this.$refs.dom.style.borderRadius = "0px 14px 14px 14px"
      } else {
        this.$refs.dom.style.borderRadius = "14px 14px 14px 14px"
      }
      },
      //跳转课程详情
      goDetail(val){
        this.$router.push({
          path:'/courseDetail',
          query:{
            resourceId: val.resourceId,
            subName: val.subName,
            chapterName: val.chapterName,
            subId: this.activeName,
            navIndex: this.navIndex,
          }
        })
      },
      //显示更多章节
      more(){
        if(this.maxHeight){
          this.$refs.chapterList.style.maxHeight = "100%"
        } else {
          this.$refs.chapterList.style.maxHeight = "270px"
        }
        this.maxHeight = !this.maxHeight
      }
  }
}
</script>

<style scoped src="../../style/course/course.css">
</style>
